import React, { useEffect, useState, useRef } from 'react';
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { backgroundObj, loginData, navigateTo } from '@/utils/utils'
import Taro, { useDidShow } from '@tarojs/taro'
import Tabs from './components/Tabs'
import OrganizationEmpty from "@/components/OrganizationEmpty";
import { fetchListGoods, fetchCheckMiniProgramUpdate } from '@/server/shop';
import Router from '@/utils/router'
import './index.scss';
const commodity = (props) => {
  const { params } = getCurrentInstance().router
  const { } = params
  const [userInfo, setUserInfo] = useState({})
  const [data, setData] = useState([])
  const [check, setCheck] = useState('1')
  const [page, setPage] = useState({
    page: '1',
    limit: 10
  })
  const [activeKey, setActiveKey] = useState('faceToFace')
  useEffect(() => {
    fetchCheckMiniProgramUpdate().then(val => {
      const { needUpdate } = val
      setCheck(needUpdate)
    })
  }, [])
  const tabs = [
    {
      label: '实物商品',
      value: 'offlineGoodsList',
      show: check !== '1',
      key: 'offline'
    }, {
      label: '单场直播',
      value: 'directLiveList',
      key: 'directLive',
      show: check !== '1'
    }, {
      label: '点播课程',
      value: 'videoCourseList',
      key: 'videoCourse',
      show: check !== '1'
    }, {
      label: '直播课程',
      value: 'liveCourseList',
      key: 'liveCourse',
      show: check !== '1'
    },
    {
      label: '面授课程',
      value: 'faceToFaceList',
      key: 'faceToFace'
    },
    {
      label: '服务课程',
      value: 'serviceList',
      key: 'service',
      show: check !== '1'
    },]
  const setPageUp = () => {
    setPage({
      ...page,
      page: page.page + 1
    })
  }
  useReachBottom(() => {
    setPageUp()
  })
  useEffect(() => {
    fetchData()
  }, [page])
  const CommodityCard = (props) => {
    const { data } = props
    const { goodsName, price, cover, priceType, id } = data
    return <View className='commodityCard_box'
      onClick={() => {
        Router('shopDetail', {
          args: {
            id: id,
            goodsId: id
          }
        })
      }
      }>
      <View className='commodityCard_profile' style={backgroundObj(cover.split(','))}></View>
      <View className='commodityCard_title font_noHide'>{goodsName}</View>
      <View className='commodityCard_price'>{priceType === 'free' ? '免费' : '￥' + price}</View>
    </View >
  }
  const fetchData = () => {
    fetchListGoods({ ...page, goodsType: activeKey }).then(e => {
      const type = tabs.reduce((item, val) => {
        if (val.key === activeKey) {
          return val.value
        }
        return item
      }, '')
      setData([...data, ...e[type]])
    })
  }
  return (
    <View className='commodity_box'>
      <Tabs onChange={(e) => {
        setActiveKey(() => {
          setPage({
            ...page,
            page: 1
          })
          setData([])
          return e
        })
      }} list={tabs.filter(val => {
        const { show = true } = val
        return show
      }).map(item => {
        return {
          label: item.label,
          value: item.key
        }
      })} activeKey={activeKey}>
      </Tabs>
      <View className='commodity_data_info'>
        {data.map((item, index) => {
          return <CommodityCard key={index} data={item}></CommodityCard>
        })}
      </View>
    </View>
  )

}

export default commodity